<template>
  <div>
    <el-card :body-style="{padding: '10px'}">
      <el-row type="flex" align="middle" justify="center">
        <el-col :span="12">
          <el-row type="flex" align="middle" justify="center">
            <el-col :span="12">
              <el-image
                  style="width: 100%; height: 100%;"
                  :src="addUrl()"
                  fit="fill"
              >
              </el-image>
              <el-row type="flex" align="middle" justify="center" style="color: #42b983; font-weight: bold; font-size: 18px;">
                {{ this.weatherTemp }}
              </el-row>
              <el-row type="flex" align="middle" justify="center">
                <el-tag style="font-size: 18px;">
                  {{ this.weather }}
                </el-tag>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row type="flex" justify="center" align="middle" style="font-size: 25px">
                {{ week }}
              </el-row>
              <el-row type="flex" justify="center" align="middle" style="font-size: 15px">
                {{ date }}
              </el-row>
              <el-row type="flex" justify="center" align="middle" style="font-size: 12px">
                {{ time }}
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-col :span="12">
            <el-row type="flex" align="middle" justify="center">
              在线人数：
            </el-row>
            <el-row type="flex" align="middle" justify="center" style="margin-top: 10px">
              <i class="iconfont icon-shouji" style="font-size: 30px" @click="testApi"/>
              <span>{{ devNum }}</span>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <span>全局延时 </span><status-indicator :status="indicatorClass" :pulse="true" />
            </el-row>
            <el-row type="flex" align="middle" justify="center" style="margin-top: 15px">
              <span :class="delayClass">{{ delayMS }}</span>
            </el-row>
          </el-col>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getWeather } from "@/util/data/api-SystemInfo"
import { freshWeek, freshDate, freshTime } from "@/util/my-tools"

export default {
  name: "SystemInfo",
  data() {
    return {
      weatherType: 'qing.png',
      weatherTemp: '32',
      weather: '晴转多云',
      week: '星期一',
      date: '2021/10/24',
      time: '00:00:00',
      delayMs: 0,
      delayClass: '',
      indicatorClass: '',
    }
  },
  methods: {
    addUrl() {
      return require(`@/assets/images/weathers/${this.weatherType}`)
    },
    testApi() {
      alert("^_^")
      // const woker = new Worker('../../../util/axios-settting.js')
      // alert(woker.constructor)
    },
    flushWeather() {
      const that = this
      getWeather().then(response => {
        // this.weatherUrl = '@/assets'
        const data = response.data
        this.weatherType = data.img
        this.weatherTemp = data.real
        this.weather = data.weather
        console.log(data)
      }).catch(error => {
        console.log(error)
      })
      return setInterval(() => {
        getWeather().then(response => {
          const data = response.data
          that.weatherType = data.img
          that.weatherTemp = data.real
          that.weather = data.weather
        }).catch(error => {
          console.log(error)
        })
      }, 1800000)
    },
    flushTime() {
      const that = this
      return setInterval(() => {
        that.week = freshWeek()
        that.date = freshDate()
        that.time = freshTime()
      }, 1)
    }
  },
  computed: {
    devNum() {
      return this.$store.state.devNum
    },
    heartBeat() {
      return this.$store.state.serverTime
    },
    delayMS() {
      return this.delayMs + 'ms'
    }
  },
  watch: {
    heartBeat(val) {
      this.delayMs = Math.abs((new Date().getTime() - val * 1000).toFixed(2))
      if (this.delayMs <= 150) {
        this.delayClass = 'my-iconfont-greet'
      } else if (this.delayMs <= 300) {
        this.delayClass = 'my-iconfont-normal'
      } else {
        this.delayClass = 'my-iconfont-bad'
      }
      const that = this
      this.indicatorClass = 'intermediary'
      setTimeout(() => {
        that.indicatorClass = 'positive'
      }, 100)
    }
  },
  mounted() {
    this.clockFlushWeather = this.flushWeather()
    this.clockFlushTime = this.flushTime()
  },
  beforeDestroy() {
    clearInterval(this.clockFlushWeather)
    clearInterval(this.clockFlushTime)
  },
}
</script>

<style scoped>
.my-iconfont-greet {
  color: #42b983;
}
.my-iconfont-normal {
  color: greenyellow;
}
.my-iconfont-bad {
  color: orangered;
}
</style>
